<!doctype html>
<html ⚡>
<head>
<meta charset="zh-cn">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>首页</title>
<script type="text/JavaScript" src="js/jquery.js"></script>
<!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.-->
<link rel="canonical" href="index.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Satisfy">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="images/style.css">
<link rel="stylesheet" href="style/style-轮播图.css">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>

<body>	
	<div class="full">
		<div class="logo">
			<div class="container">
				<img class="title-1" src="img/title-front.png">
				<!-- <img class="title-2" src="img/title-front-2.png"> -->
			</div>
		</div>
		<!-- 导航条 -->
		<nav>
			<div class="container">
				<!-- 下拉菜单 -->
				<ul class="menu">
					<li class="menuitem">
						<div class="itemtitle">首页</div>
					</li>
					<li class="menuitem">
						<div class="itemtitle">景区风貌</div>
						<ul class="itemcontent">
							<li>淮海战役纪念塔</li>
							<li>淮海战役纪念馆</li>
							<li>国防教育馆</li>
						</ul>
					</li>
					<li class="menuitem">
						<div class="itemtitle">景区简介</div>
						<ul class="itemcontent">
							<li>淮海战役</li>
							<li>纪念塔简介</li>
							<li>纪念馆简介</li>
						</ul>
					</li>
					<li class="menuitem">
						<div class="itemtitle">景区导览</div>
						<ul class="itemcontent">
							<li>参观指南</li>
							<li>交通线路</li>
							<li>参观须知</li>
						</ul>
					</li>
					<li class="menuitem">
						<div class="itemtitle">文创作品</div>
						<ul class="itemcontent">
							<li>诗词歌赋</li>
							<li>影视作品</li>
							<li>文学书籍</li>
						</ul>
					</li>
					<li class="menuitem">
						<div class="itemtitle">联系我们</div>
					</li>
				</div>
			</div>
		</nav>
		<!-- 内容区 -->
		<main class="content">
			
			<!-- 轮播图 -->
			<div id="slideshow">
				<div id="imgcontainer">
					<img src="img/slide01.jpg" class="slide">
					<img src="img/slide02.jpg" class="slide">
					<img src="img/slide03.png" class="slide">
					<img src="img/slide04.jpg" class="slide">
					<img src="img/slide01.jpg" class="slide">
				</div>
			</div>


			<div class="container">
			
			</div>
			
		</main>
		<!-- 底部 -->
		<footer>
			
		</footer>
	</div>


	
</body>

<script>
    

    // *** 选项卡 ***
    $('.tabtitle li').click(function(){
        // 获取单击的是第几个标签
        var index = $(this).index();
        // 为单击的标签、对应的内容页添加current类
        $('.tabtitle li').removeClass('current');
        $('.tabtitle li').eq(index).addClass('current');
        $('.tabcontent .tab').removeClass('current');
        $('.tabcontent .tab').eq(index).addClass('current');
    });

    // // *** 菜单 ***
    // $('.menuitem').hover(function(){
    //     // 获取单击的是第几个菜单选项
    //     var index = $(this).index();
    //     $('.menuitem').eq(index).children('.itemcontent').show();
    // },function(){
    //     // 获取单击的是第几个菜单选项
    //     var index = $(this).index();
    //     $('.menuitem').eq(index).children('.itemcontent').hide();
    // });


</script>
</html>